
export default {
  data() {
    return {
      barChartsOption: {
        legend: {
          top: "2%",
          right: "5%"
        },
        grid: {
          top: "10%",
          left: "20%",
          right: "5%",
          bottom: "2%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        series: [
          {
            name: "完成数",
            type: "bar",
            data: [],
            label: {
              show: true,
              position: "top",
              valueAnimation: true
            }
          },
          {
            name: "未完成数",
            type: "bar",
            label: {
              show: true,
              position: "top",
              valueAnimation: true
            },
            data: []
          }
        ]
      }
    }
  },
  methods: {
    // 初始化柱状图
    initBarChart(data) {
      if (this.myChart) {
        this.myChart.dispose();
        this.myChart = null;
      }
      const xAxisData = []
      const series1 = []
      const series2 = []
      for (const item of data) {
        const { taskDate, finishCount, noEndCount } = item || {}
        xAxisData.push(taskDate)
        series1.push(finishCount)
        series2.push(noEndCount)
      }
      this.barChartsOption.xAxis.data = xAxisData
      this.barChartsOption.series[0].data = series1
      this.barChartsOption.series[1].data = series2
    }
  }
}
